<template>

  <el-dialog :title="id == null ? '添加' : '编辑'" :visible.sync="visible">

    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="120px" label-position="left" :inline="false" style="width: 400px;">
      <el-form-item label="上级节点" size="mini" prop="parentId">
        <cascader-system-node ref="cascader-system-node" v-model="mainQuery.parentId" @on-change="val => mainQuery.parentId = val"></cascader-system-node>
      </el-form-item>

      <el-form-item label="名称" size="mini" prop="title">
        <el-input placeholder="" v-model="mainQuery.title" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="英文简称" size="mini" prop="shortName">
        <el-input placeholder="" v-model="mainQuery.shortName" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="类型" prop="showStatus">
        <el-radio-group v-model="mainQuery.showStatus">
          <el-radio v-for="(item,index) in boolOptions"  :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
  
      <el-form-item label="请求URL地址" size="mini"  :prop="mainQuery.showStatus == 0 ? 'url': '' ">
        <el-input placeholder="" v-model="mainQuery.url" :disabled="loading" @keyup.enter.native="submit" clearable style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="组件路径" size="mini"  :prop="mainQuery.showStatus == 1? 'component': '' " v-if="mainQuery.showStatus == 1">
        <el-input placeholder="" v-model="mainQuery.component" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="图标样式" size="mini" :prop="mainQuery.showStatus == 1? 'style': '' " v-if="mainQuery.showStatus == 1">
        <el-input placeholder="" v-model="mainQuery.style" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="排序" size="mini" prop="sort">
        <el-input placeholder="" v-model="mainQuery.sort" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="mainQuery.status">
          <el-radio v-for="(item,index) in statusOptions"  :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="创建时间" size="mini" v-if="data != null">
        <el-input placeholder="" v-model="data.createTime" readonly></el-input>
      </el-form-item>
      <el-form-item label="修改时间" size="mini" v-if="data != null">
        <el-input placeholder="" v-model="data.updateTime" readonly></el-input>
      </el-form-item>

    </el-form>

      <div slot="footer" class="dialog-footer">
        <el-popover
          v-if="id != null"
          placement="top"
          width="160"
          v-model="popDeleteVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
          </div>
          <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
        </el-popover>

        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
      </div>
  </el-dialog>
</template>

<script>

import util from '@/libs/util';
import ApiMain from '@/api/system.node';

import CascaderSystemNode from '@/components/system/cascader-system-node';

export default {
  mixins: [
  ],
  props: [
    'statusOptions',
    'boolOptions',
  ],
  components: {
    'cascader-system-node': CascaderSystemNode,
  },
  data () {

    return {

      visible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
        parentId  : '',
        title     : '',
        shortName : '',
        url       : '',
        component : '',
        style     : '',
        sort      : 50,
        showStatus: 1,
        status    : 1,
      },

      rules: {
        // parentId: [
        //   { required: true, message: '请输入上级节点', trigger: 'blur' },
        // ],
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        showStatus: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入URL地址', trigger: 'blur' },
        ],
        component: [
          { required: true, message: '请输入组件路径', trigger: 'blur' },
        ],
        style: [
          { required: true, message: '请输入图标样式', trigger: 'blur' },
        ]
      },

      id  : null,
      data: null,

    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {
    getRandom(start, end, fixed=0) {
      let differ = end - start
      let random = Math.random()
      return (start + differ * random).toFixed(fixed)
    },

    show (id) {

      // this.reset();

      if (id) {
        this.id = id;
        this.fetchData();
      } else {
        this.mainQuery = {
          parentId  : '',
          title     : '',
          shortName : '',
          url       : '',
          component : '',
          style     : '',
          sort      : 50,
          showStatus: 1,
          status    : 1,
        };
      }

      this.visible = true;
    },

    close () {
      // this.reset();

      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {
      
      this.mainQuery = Object.copy(this.mainQueryRaw);
      if (this.$refs['main-form']) {
        console.log(this.$refs['main-form']);
        this.$refs['main-form'].resetFields();
        console.log('121');
      } 
      if (this.$refs['cascader-system-node']) {
        console.log(this.$refs['cascader-system-node']);
        this.$refs['cascader-system-node'].fetchOptions();
      }
        
      this.id   = null;
      this.data = null;
    },

    async fetchData () {

      this.loading = true;

      try {
        var re = await ApiMain.info({id: this.id});
        this.data = re;
      } catch (err) {
        this.data = null;
      }

      if (this.data) {
        for (var k in this.mainQuery) {
          this.mainQuery[k] = this.data[k];
        }
      }

      this.loading = false;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {
    

      if (! this.verifyForm()) return false;

      this.loading = true;

      if (this.id) {
        await this.submitSet();
      }
      else {
        await this.submitAdd();
      }

      this.loading = false;

    },

    async submitAdd () {

      try {
        await ApiMain.add(this.mainQuery);
        this.$message({message: '添加成功', type: 'success'});
        this.close();
      } catch (err) {
      }

    },

    async submitSet () {

      this.mainQuery.id = this.id;

      try {
        await ApiMain.set(this.mainQuery);
        this.$message({message: '修改成功', type: 'success'});
        this.close();
      } catch(e) {
      }

    },

    async submitDel () {
      this.popDeleteVisible = false;
      this.loading = true;

      try {
        await ApiMain.del({id: this.id})
        this.$message({message: '删除成功', type: 'success'});
        this.close();
      } catch(e) {
      }

      this.loading = false;

    },
  }
}
</script>

<style>

</style>
